<%@ page language="java" pageEncoding="utf-8"%>

<!--/*** 控件HTML标签 **/-->
<div class="col-md-9">
    <div id="charts3"  style="height:420px;margin-top: 20px;margin-bottom: 12px;"></div>
</div>




<!--/*** pqGrid初始化事件 **/-->
<script>
    $("#charts3").width(winWidth-300);
    var myChart3 = echarts.init(document.getElementById('charts3'));
    option3 = {
        title: {
            x: 'center',
            y: 'top',
            textAlign: 'left',
            textStyle: {
                color: '#787878',
                fontWeight: 'bold',
                fontSize: 14,
            }
        },
        backgroundColor: '-webkit-linear-gradient(left top,rgba(152,186,246,2),rgba(152,186,246,0.5))',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                saveAsImage: {show: true},
                restore: {show: true},
                dataZoom: {show: true}
            }
        },
//        dataZoom: [//给x轴设置滚动条
//            {
//                start:0, //默认为0
//                end: 100,
//                type: 'slider',
//                show: true,
//                xAxisIndex: [0],
//                handleSize: 0,//滑动条的 左右2个滑动条的大小
//                height: 12,//组件高度
//                left: '4%', //左边的距离
//                right: '4%',//右边的距离
//                bottom: 10,//下边的距离
//                handleColor: '#ddd',//h滑动图标的颜色
//                handleStyle: {
//                    borderColor: "#cacaca",
//                    borderWidth: "1",
//                    shadowBlur: 2,
//                    background: "#ddd",
//                    shadowColor: "#ddd",
//                },
//                fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
//                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//                    //给第一个设置0，第四个设置1，就是垂直渐变
//                    offset: 0,
//                    color: '#1eb5e5'
//                }, {
//                    offset: 1,
//                    color: '#5ccbb1'
//                }]),
//                backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
//                showDataShadow: false,//是否显示数据阴影 默认auto
//                showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
//                handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
//                filterMode: 'filter'
//            },
//            //下面这个属性是里面拖到
//            {
//                type: 'inside',
//                show: true,
//                xAxisIndex: [0],
//                start: 0,//默认为1
//                end: 100
//            },
//        ],
        dataZoom: [{
            show: true,
            height: 16,
            left: '4%',
            right: '4%',
            bottom: 10,
            xAxisIndex: [0],
            start: 0,
            end: 100,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle:{
                color:"#d3dee5",
            },
            textStyle:{
                color:"#fff"},
            borderColor:"#90979c"
        },{
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
        }],
        grid: {
            show: true,
            backgroundColor: 'white',
            top: '15%',
            bottom: '13%',
            left: '4%',
            right: '4%'
        },
        legend: {
            type: 'scroll',
            top: '6%',
            bottom: '15%',
            left: '4%',
            right: '4%'
        },
        xAxis: [{}],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                },
                //name: '运行比例',
                scale: true,
                max: 'dataMax',
            },
        ],
        series: []
    };
</script>